<template>
	<view>
		<view style="background-color: white; width: 100%;height: var(--status-bar-height);">
		</view>
		<uni-nav-bar color="#000" right-icon="checkmarkempty" @clickRight="clickOK()" left-icon="left" @clickLeft="navBack()" title="详细数据"/>

		
		<!-- <uni-section class="mb-10" title="实验名称" :sub-title="expername" type="line">
		</uni-section> -->
		<view class="flex-row items-center list-item space-x-20" style="margin-bottom: 20rpx;">
		  <view class="section"></view>
		  <view class="flex-col items-start flex-auto space-y-10">
		    <text class="font_2">实验名称</text>
		    <text class="font_3">{{expername}}</text>
		  </view>
		</view>
		
		<!-- <uni-section class="mb-10" title="实验设备" :sub-title="experequipname" type="line">
		</uni-section> -->
		<view class="flex-row items-center list-item space-x-20" style="margin-bottom: 20rpx;">
		  <view class="section"></view>
		  <view class="flex-col items-start flex-auto space-y-10">
		    <text class="font_2">实验设备</text>
		    <text class="font_3">{{experequipname}}</text>
		  </view>
		</view>
		
		<!-- <uni-section class="mb-10" title="实验简介" type="line" padding="0 0 5px 10px">
			<text>{{experins}}</text>
		</uni-section> -->
		<view class="flex-row items-center list-item space-x-20" style="margin-bottom: 20rpx;">
		  <view class="section"></view>
		  <view class="flex-col items-start flex-auto space-y-10">
		    <text class="font_2">实验简介</text>
		    <text class="font_3">{{experins}}</text>
		  </view>
		</view>
		
		
		<!-- <uni-section class="mb-10" title="预期阶段实验温度变化详表" type="line"></uni-section> -->
		<view class="tempsection" style="margin-bottom: 20rpx;">
		<view class="flex-row items-center space-x-20">
		  <view class="section"></view>
		  <view class="flex-col items-start flex-auto space-y-10">
		    <text class="font_2">预期阶段实验温度变化详表</text>
		  </view>
		</view>
		<view class="charts-box">
			<view class="table">
				<senior-table :headers="dataTable.headers" :contents="dataTable.contents" :urlCol="dataTable.urlCol" :firstLineFixed="true" :sortCol="dataTable.sortCol"></senior-table>
			</view>
		</view>
		</view>
		
		
		<!-- <uni-section class="mb-10" title="预期温度变化占比图" type="line"></uni-section> -->
		<view class="tempsection" style="margin-bottom: 20rpx;">
		<view class="flex-row items-center space-x-20">
		  <view class="section"></view>
		  <view class="flex-col items-start flex-auto space-y-10">
		    <text class="font_2">预期温度变化占比图</text>
		  </view>
		</view>
		<view class="charts-box">
			<qiun-data-charts type="ring" :opts="opts2" :chartData="chartData2"></qiun-data-charts>
		</view>
		</view>
		
		<!-- <uni-section class="mb-10" title="预期温度曲线图 (℃-分钟)" type="line"></uni-section> -->
		<view class="tempsection" style="margin-bottom: 20rpx;">
		<view class="flex-row items-center space-x-20">
		  <view class="section"></view>
		  <view class="flex-col items-start flex-auto space-y-10">
		    <text class="font_2">预期温度曲线图 (℃-分钟)</text>
		  </view>
		</view>
		<view class="charts-box">
			<qiun-data-charts type="area" :opts="opts1" :chartData="chartData1"></qiun-data-charts>
		</view>
		</view>
		
		<!-- <view class="footerImgBox">
			<view class="fontsss">
				平台所属：南京工程学院
			</view>
		</view> -->
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import SeniorTable from '@/components/data-table/senior-table.vue'
	
	import {_getExperByName} from '@/service/exper_api.js'
	export default {
		components:{
			SeniorTable
		},
		computed:{
			...mapState(['hasLogin','userInfo','accountNum'])
		},
		data() {
			return {
				dataTable:{
					headers:[
						{
							label: "阶段",
							key: "col1"
						}, {
							label: "起始温度",
							key: "col2"
						}, {
							label: "最后温度",
							key: "col3"
						}, {
							label: "实验时长",
							key: "col4"
						},
						{
							label: "速率",
							key: "col5"
						},
						{
							label: "备注",
							key: "col6"
						}
					],
					contents:[],
					sortCol:[
						{
							key: "col2",
							isNumber: true
						},
						{
							key: "col3",
							isNumber: true
						},
						{
							key: "col4",
							isNumber: true
						},
						{
							key: "col5",
							isNumber: true
						}
					]
				},
				expername:'',
				experequipname:'',
				experins:'',
				temp_last:'',
				details:{},
				
				chartData1: {},
				opts1: {
					color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
					padding: [15,10,0,15],
					legend: {},
					xAxis: {
					  disableGrid: true
					},
					yAxis: {
					  gridType: "dash",
					  dashLength: 2
					},
					extra: {
					  area: {
						type: "curve",
						opacity: 0.2,
						addLine: true,
						width: 2,
						gradient: true
					  }
					}
				},
				chartData2: {},
				opts2: {
					rotate: false,
					rotateLock: false,
					color: ["#1890FF","#91CB74","#EE6666","#FAC858","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
					padding: [5,5,5,5],
					dataLabel: true,
					legend: {
					  show: true,
					  position: "right",
					  lineHeight: 25
					},
					title: {
					  name: "总时长",
					  fontSize: 15,
					  color: "#666666"
					},
					subtitle: {
					  name: "7小时",
					  fontSize: 25,
					  color: "#7cb5ec"
					},
					extra: {
					  ring: {
						ringWidth:30,
						activeOpacity: 0.5,
						activeRadius: 10,
						offsetAngle: 0,
						labelWidth: 15,
						border: true,
						borderWidth: 3,
						borderColor: "#FFFFFF",
						linearType: "custom"
					  }
					}
				}
			}
		},
		onLoad() {
				
			try {
				const value = uni.getStorageSync('experData');
				if (value) {
					this.expername = value;
					this.getExperData();
				}
			} catch (e) {
				console.error(e);
			}
		},
		methods: {
			...mapMutations(['login','isSetExper','logoutExper']),
			async getExperData(){
				uni.showLoading({
					title: '加载中...',
				});
				const res = await _getExperByName(this.expername);
				console.log(res);
				if (res.flag == true){
					uni.hideLoading()
					this.experequipname = res.data.equip_exper;
					this.experins  =res.data.ins_exper;
					this.details = res.data.details;
					console.log(this.details);
					this.setDataForTable();
					setTimeout(()=>{
						this.setDataForchart1();
						this.setDataForchart2();
					},300);

				}
			},
			setDataForTable(){
				for (var i=0; i<this.details.temporary_ins.length; i++){
					let temp1 = this.details.temporary[i].temp;
					let temp2 = this.details.temporary[i+1].temp;
					let time1 = this.details.temporary[i].time;
					let time2 = this.details.temporary[i+1].time;
					let v = (temp2-temp1)/(time2-time1)*60;
					v = v.toFixed(1);
					this.dataTable.contents.push({
						col1: this.details.temporary_ins[i].phase,
						col2: temp1 + "℃",
						col3: temp2 + "℃",
						col4: (time2-time1) + "分钟",
						col5: v + "℃/小时",
						col6: this.details.temporary_ins[i].ins
					})
				}
				this.temp_last = this.details.temporary[this.details.temporary.length-1].temp
			},
			setDataForchart1(){
				var categories = [];
				var data = [];
				for (var i=0;i<this.details.temporary.length; i++){
					categories.push(this.details.temporary[i].time)
					data.push(this.details.temporary[i].temp)
				}
				var series = [];
				series.push({
					name:"预期工作温度",
					data
				})
				let res1 = {
					categories,
					series
				}
				this.chartData1 = JSON.parse(JSON.stringify(res1));
			},
			setDataForchart2(){
				var t = (this.details.total_time / 60).toFixed(1);
				this.opts2.subtitle.name = t + "小时";
				var t_rise = (this.details.rise_time/60).toFixed(1)
				var t_fixed = (this.details.fixed_time/60).toFixed(1)
				var t_reduce = (this.details.reduce_time/60).toFixed(1)
				
				let res2 = {
					series: [
						{
						    data: [
								{
									"name":"增温",
									"value":this.details.rise_time,
								},{
									"name":"恒温",
									"value":this.details.fixed_time,
								},{
									"name":"降温",
									"value":this.details.reduce_time,
								}
							]
						}
					  ]
					};
				this.chartData2 = JSON.parse(JSON.stringify(res2));
			},
			navBack(){
				uni.navigateBack({
				})
			},
			clickOK(){
				let newdata={
					chartData:this.chartData1,
					expername:this.expername,
					temp_last:this.temp_last,
					temporary:this.details.temporary
				}
				console.log(newdata)
				uni.showModal({
					title:"设置实验",
					content: "是否选择\n" + this.expername + "？",
					success:function(e) {
						if (e.confirm){
							this.isSetExper()
							uni.setStorage({
								key:'setexperforequip',
								data:newdata
							})
							setTimeout(()=>{
								uni.navigateBack({
									delta:2
								})
							},300)
						}
					}.bind(this)
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	page {
		min-height: 100%;
		// background: $page-color-base;
	}
    .charts-box {
		background: #fff;
		padding-top: 30rpx;
		padding-bottom: 30rpx;
		margin-left: 10rpx;
		margin-right: 10rpx;
		
	    width: 730rpx;
    }
	.mb-10 {
		margin-left: 10rpx;
		margin-right: 10rpx;
		margin-top: 20rpx;
		text{
			color: #999;
		}
	}
	.table{
		padding-left: 10upx;
		padding-right: 10upx;
	}
	
	.footerImgBox {
		font-size: $font-sm;
		color: #C0C4CC;
		margin: 0 auto;
		text-align: center;
		margin-top: 40upx;
		margin-bottom: 10upx;
	
		.logoBox {
			.imgLogo {
				width: 80upx;
				height: 30upx;
			}
		}
	
		.fontsss {
			margin: 8upx auto;
		}
	}
	.list-item {
	  padding: 8.33rpx 16.67rpx 20.83rpx;
	  background-color: #ffffff;
	  border-radius: 14.58rpx;
	  box-shadow: 0px 4.17rpx 0px #00000040;
	  border: solid 2.08rpx #138f8780;
	}
	.section {
	  background-color: #138f87;
	  border-radius: 14.58rpx;
	  width: 8.33rpx;
	  height: 35.42rpx;
	  margin-left: 15rpx;
	}
	.font_2 {
	  font-size: 33.33rpx;
	  font-family: WenQuanYiMicroHeiMono;
	  line-height: 30.21rpx;
	  color: #000000;
	  margin-left: 10rpx;
	}
	.font_3 {
	  font-size: 29.17rpx;
	  font-family: WenQuanYiMicroHeiMono;
	  line-height: 27.08rpx;
	  color: #868686;
	  margin-left: 10rpx;
	  margin-top: 20rpx;
	}
	.tempsection{
		padding: 8.33rpx 16.67rpx 20.83rpx;
		background-color: #ffffff;
		border-radius: 14.58rpx;
		box-shadow: 0px 4.17rpx 0px #00000040;
		border: solid 2.08rpx #138f8780;
	}
	
</style>

